<template>
  <div class="reset-password-form">
    <h3 class="orange-title">重置密码</h3>
    <el-form :model="form" label-width="100px">
      <el-form-item label="账号">
        <el-input v-model="form.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认新密码">
        <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入新密码" />
      </el-form-item>
      <el-form-item class="button-form-item">
        <div class="button-group">
          <el-button class="custom-primary-btn" @click="handleSubmit">确认修改</el-button>
          <el-button class="custom-outline-btn" @click="$emit('cancel')">返回登录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['passwordChanged', 'cancel'])

const form = ref({
  account: '',
  newPassword: '',
  confirmPassword: ''
})

const handleSubmit = () => {
  if (!form.value.account || !form.value.newPassword || !form.value.confirmPassword) {
    ElMessage.error('请填写完整信息')
    return
  }
  
  if (form.value.newPassword !== form.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  // 触发密码修改事件，将新密码传递给父组件
  emit('passwordChanged', {
    account: form.value.account,
    newPassword: form.value.newPassword
  })
}
</script>

<style scoped>
.reset-password-form {
  padding: 20px;
}

.orange-title {
  color: #f60;
}


.button-group {
  display: flex;
  justify-content: flex-start;
  padding-right: 100px;
}

.custom-primary-btn {
  background-color: #f60;
  border-color: #f60;
  color: white;
}

.custom-primary-btn:hover {
  background-color: #ff8533;
  border-color: #ff8533;
}

.custom-outline-btn {
  background-color: white;
  border-color: #f60;
  color: #f60;
}

.custom-outline-btn:hover {
  background-color: #fff3e8;
}
</style> 